<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .el-carousel-item img{
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="4" style="display: flex;flex-direction: row;align-items: center;">
              <img src="./static/images/logo.png" style="height: 60px" />
              <h2>技术社区</h2>
            </el-col>
            <el-col :span="8">
              <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">文章</el-menu-item>
                <el-menu-item index="3">课程</el-menu-item>
                <el-menu-item index="4">商城</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="8" style="height: 60px;line-height: 60px;" ><el-input /> </el-col>

            <el-col :span="4" style="text-align: right;height: 60px;line-height: 60px;">
              <el-link type="primary">登录</el-link>&nbsp;
              <el-link type="primary">注册</el-link>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <el-carousel height="420px">
            <el-carousel-item>
              <img src="./static/images/carousel1.png" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="./static/images/carousel2.png" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="./static/images/carousel3.png" />
            </el-carousel-item>
          </el-carousel>
        </el-main>
        <el-footer>
            <el-row>
                <el-col :xs="24" :lg="8">
                    <div>
                        <img src="./static/images/logo.png" style="height: 100px;">
                    </div>
                    <div>
                        <h2>技术社区</h2>
                        <p>致力于构建一个专业的IT技术交流社区</p>
                    </div>
                </el-col>
                <el-col :xs="24" :lg="8">
                    <div>
                        <el-link type="primary">首页</el-link>
                        <el-link type="primary">文章</el-link>
                        <el-link type="primary">课程</el-link>
                        <el-link type="primary">商城</el-link>
                    </div>
                    <div>
                        <el-link type="primary">关于我们</el-link>
                        <el-link type="primary">使用手册</el-link>
                        <el-link type="primary">隐私条款</el-link>
                        <el-link type="primary">建议反馈</el-link>
                    </div>
                </el-col>
                <el-col xs="24" :lg="8">
                    <div>
                        <h2>联系我们</h2>
                        <p>电话:111111</p>
                        <p>邮箱:1111@dev.com</p>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <p style="margin:20px 0">软件开发工作室版权所有</p>
            </el-row>
        </el-footer>
      </el-container>
    </div>
  </body>
  <script>
    var App = {
      data() {
        return {
          name: "hello vue",
          age: 18,
        };
      },
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");

  </script>
</html>
